<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎您: {{ name }}</div>
    <div class='titleSurvey'>
      <div>
        <p>成团数量</p>
        <count-to :start-val="0" :end-val="data.groupSuccessCount" :duration="3600" class="card-panel-num"/>
      </div>
      <div>
        <p>拼友数量</p>
        <count-to :start-val="0" :end-val="data.groupUserCount" :duration="3600" class="card-panel-num"/>
      </div>
      <div>
        <p>公益金总额(元)</p>
        <span class="card-panel-num">{{ data.sumOfContribution | parseMoneyExcept }}</span>
      </div>
      <div>
        <p>分红总额(元)</p>
        <span class="card-panel-num">{{ data.sumOfBonus | parseMoneyExcept }}</span>
      </div>
      <div>
        <p>奖金总额(元)</p>
        <span class="card-panel-num">{{ data.sumOfReward | parseMoneyExcept }}</span>
      </div>
      <div>
        <p>订单总额(元)</p>
        <span class="card-panel-num">{{ data.sumOfOrderMoney | parseMoneyExcept }}</span>
      </div>
      <div>
        <p>退款总额(元)</p>
        <span class="card-panel-num">{{ data.sumOfRefundMoney | parseMoneyExcept }}</span>
      </div>
      <div>
        <p>总毛利(元)</p>
        <span class="card-panel-num">{{ data.profit | parseMoneyExcept }}</span>
      </div>
    </div>
    <div class="common-bot">
      <div>历史数据</div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} ') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="成团数量" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.groupSuccessCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="拼友数量" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.groupUserCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="公益金总额" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sumOfContribution | parseMoneyExcept }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="分红总额" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sumOfBonus | parseMoneyExcept }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="订单总额" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sumOfOrderMoney | parseMoneyExcept }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="source" label="退款总额" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sumOfRefundMoney | parseMoneyExcept }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="source" label="奖金总额" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sumOfReward | parseMoneyExcept }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="毛利" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.profit | parseMoneyExcept }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="totalElement"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import CountTo from 'vue-count-to';
import {dayDataList, systemState} from "@/api/order";

export default {
  name: 'Dashboard',
  data() {
    return {
      data: {},
      tableData: [],
      showPage: false,
      limit: 10,
      nowPage: 1,
      totalElement: 0,
    }
  },
  components: {
    CountTo
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    nowPage(val) {
      this.getData();
    },
    limit(val) {
      this.getData();
    },
  },
  mounted() {
    systemState().then(res => {
      console.log(res);
      this.data = res.data
    })
    this.getData();
  },
  methods: {
    getData() {
      dayDataList({
        limit: this.limit,
        page: this.nowPage - 1
      })
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.data;
            this.totalElement = res.total;
            this.showPage = true;
          }
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.nowPage = val;
    },
    handleClose(done) {
      done();
    },

  }
}
</script>

<style>
.titleSurvey {
  display: flex;
  background: rgba(18, 150, 219, 1);
}

.titleSurvey > div {
  width: 20%;
  text-align: center;
  padding: 2rem;
}

.titleSurvey div p:first-child {
  color: rgba(221, 221, 221, 1);
  font-size: 16px;
  margin: 0;
}

.titleSurvey div .card-panel-num {
  font-size: 2.6rem;
  color: #fff;
  font-weight: 400;
  margin: 21px 0 0 0;
  display: inline-block;
}

.titleSurvey div p:last-child {
  font-size: 16px;
  color: #fff;
  margin: .3rem 0 0 0;
}


.box-card {
  width: 100%;
  margin-top: 43px;
}


.cardSurvey {
  display: flex;
  /* background: rgba(18, 150, 219, 1); */
}

.cardSurvey > div {
  width: 20%;
  text-align: center;
  padding: 2rem;
  border-right: 1px solid #ebeef5;
}


.cardSurvey > div:last-child {
  border: none;
}

.cardSurvey div p:first-child {
  color: rgba(130, 129, 129, 1);
  font-size: 16px;
  margin: 0;
  /* border-right: 1px solid #c7c7c7; */
}

.cardSurvey div .card-panel-num {
  font-size: 2.5rem;
  color: #101010;
  font-weight: 400;
  margin: 21px 0 0 0;
  display: inline-block;
}

.cardSurvey div p:last-child {
  font-size: 16px;
  color: rgba(16, 16, 16, 1);
  margin: .3rem 0 0 0;
}

.searchPiker {
  text-align: right;
}

.searchPiker .picker {
  width: 25rem;
}

.searchPiker span:nth-child(2) {
  margin-left: 60px;
}

.searchPiker .el-range-separator {
  width: 12%;
}

.searchPiker .primary {
  margin-left: 20px;
}

</style>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
